<script setup lang="ts">
import { ref } from 'vue'
import { omit } from 'lodash-es'
import { permissionConfig } from './config'
import { addPermission, deletePermission, getPermission, updatePermission } from '@/api/permission'
import PageFormTable from '@/components/page/BaseFormTable/index.vue'

const PageFormTableRef = ref<InstanceType<typeof PageFormTable>>()

const apiConfig = {
  getTableList: getPermission,
  addTableItem: addPermission,
  updateTableItem: updatePermission,
  deleteTableItem: deletePermission,
  _handleEditModel,
}

function _handleEditModel(data: any) {
  const editData = omit(data, ['createTime', 'updateTime'])
  return editData
}
</script>

<template>
  <PageFormTable
    ref="PageFormTableRef"
    :config="permissionConfig"
    :api-config="apiConfig"
  >
    <template #customs="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <div class="gp__flex-start">
          <a-button class="gp__plain-btn" @click.stop="PageFormTableRef?.onClickEditForm({ ...record })">
            {{ permissionConfig.text.editAction }}
          </a-button>
          <a-popconfirm
            title="Are you sure delete this code?"
            cancel-text="No"
          >
            <template #okButton>
              <a-button type="primary" size="small" :loading="PageFormTableRef?.deleteLoading" @click="PageFormTableRef?.onClickDeleteAction({ id: record.id })">
                Yes
              </a-button>
            </template>
            <a-button danger @click.stop>
              Delete
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </template>
  </PageFormTable>
</template>
